<template>
        <div  class="tabar">
                <div class="tabar_contents" v-for="item,index in options" :key="index" >
                    <div class="tabar_items" @click="tabchange(item,index)">
                        <div class="img_radius" v-show="index==active">
                            <img class="tabar_items_icon_actives" :src="item.incons_actives" alt="" srcset="" >
                        </div>
                        <img class="tabar_items_icon" :src="item.icons" alt="" srcset="" v-show="index!=active">
                        <div :class="index==active?'tabar_text_active':'tabar_text'">{{item.text}}</div>
                    </div>
                </div>
        </div>
</template>

<script>
import { useRouter,useRoute, onBeforeRouteUpdate } from 'vue-router'
import {reactive, ref, toRefs, onBeforeMount, watch} from "vue"
export default {
    setup(){
        const active =  ref(0)
        const route = useRouter()
        const router = useRoute()
        const tabar = reactive({
            options:[
                {
                    path:'/home',
                    icons:require('../../assets/imgs/home_icon.png') ,
                    incons_actives:require('../../assets/imgs/home_icon_actives.png'),
                    text:'home'
                },
                {   
                    path:'/market',
                    icons:require('../../assets/imgs/market_icon.png'),
                    incons_actives:require('../../assets/imgs/market_icon_actives.png'),
                    text:'market'
                },
                {   
                    path:'/team',
                    icons:require('../../assets/imgs/team_icon.png'),
                    incons_actives:require('../../assets/imgs/team_icon_actives.png'),
                    text:'team'
                },
                {
                    path:'/my',
                    icons:require('../../assets/imgs/my_icon.png'),
                    incons_actives:require('../../assets/imgs/my_icon_actives.png'),
                    text:'my'
                }   
            ]
        })
        onBeforeRouteUpdate((to)=>{
            tabar.options.map((item,index) => {
                if(to.path == item.path){
                    active.value = index
                }
            })
        })
        onBeforeMount(()=>{
            tabar.options.map((item,index) => {
                if(router.path == item.path){
                    active.value = index
                }
            })
        })

        const tabchange = (item,index) =>{
            route.push({
                path:item.path
            })
        }

        return {
            active,
            ...toRefs(tabar),
            tabchange
        }
    }
}
</script>

<style lang="scss">
    .tabar{
        font-size: 20px;
        width: 100vw;
        background: rgb(255, 255, 255);
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 142px;
        position: fixed;
        bottom: 0;
        color: #CDCDCD;
        z-index: 99;
        box-shadow: 0px -4px 19px 0px rgba(204, 204, 204, 0.49);
        border-radius: 20px 20px 0  0;
        .tabar_contents{
            flex: 1;
            height: 100%;
                .tabar_items{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                position: relative;
                .tabar_items_icon{
                    width: 40px;
                    height: 40px;
                }
                .img_radius{
                    position: absolute;
                    top: -45px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 130px;
                    width: 148px;
                    .tabar_items_icon_actives{
                    width: 148px;
                    height: 130px;
                    }
                }
                .tabar_text{
                    margin-top: 10px;
                    margin-bottom: 14px;
                }
                .tabar_text_active{
                    margin-bottom: 14px;
                    color: #3C39D6;
                }            
            }
        }
    }
</style>